<template>
  <div>
    <!-- 接入头部组件 -->
    <myheader></myheader>
    <!-- 中间新闻部分 -->
    <div class="container">
      <!-- 顶部图片 -->
      <div class="top">
        <!-- <img class="topImg" src="../../images/news.png" alt="" /> -->
      </div>
      <!-- 中间新闻部分 -->
      <div class="middle">
        <!-- 新闻导航栏 -->
        <!-- 点击跳转--》传id -->
        <div class="navigation">
          <div class="nav" v-for="(cate, index) in category" @click="showGoodsByCategoryId(cate.id)" :key="'cate-' + index">
            {{ cate.name }}
          </div>
          <!-- <div class="nav" >技术文章</div>
                <div class="nav">活动通知</div> -->
        </div>

        <div class="content" v-for="(nes, index) in news" :key="'new-' + index">
          <div class="news" v-if="nes.categoryId == showCategoryId">
            <div class="shownew">
              <div class="newsImg"><img :src="nes.cover" alt="" /></div>
              <!-- 新闻描述 -->
              <div class="newState">
                <div class="title">{{ nes.title }}</div>
                <div class="describe">{{ nes.describe }}</div>
                <div class="button">{{ nes.button }}</div>
              </div>
              <div class="data">
                <div class="month">{{ nes.month }}</div>
                <div class="year">{{ nes.year }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 接入尾部组件 -->
    <mybottom></mybottom>
  </div>
  <!-- Header -->

  <!-- ROUTER -->
  <!-- <router-view /> -->
</template>

<script>
import myheader from '@/components/Header.vue';
import mybottom from '@/components/Bottom.vue';
export default {
  components: { myheader, mybottom },
  data() {
    return {
      showCategoryId: 1,
      category: [
        {
          id: 1,
          name: '行业资讯',
        },
        {
          id: 2,
          name: '技术文章',
        },
        {
          id: 3,
          name: '活动通知',
        },
      ],
      news: [
        {
          id: 1,
          cover: require('../../images/image1.png'),
          describe: '今天（8月25日）上午10:00，北京市政府新闻办公室举行北京市义务教育阶段“双减”工作推进情况新闻发布会，市教委、市民政局、',
          title: '人社部印发通知加强新职业培训工作',
          button: '查看详情',
          month: '08-25',
          year: 2021,
          categoryId: 1,
        },
        {
          id: 2,
          cover: require('../../images/image1.png'),
          describe: '今天（8月25日）上午10:00，北京市政府新闻办公室举行北京市义务教育阶段“双减”工作推进情况新闻发布会，市教委、市民政局、',
          title: '先富帮后富 三次分配传递向善力量',
          button: '查看详情',
          month: '08-25',
          year: 2021,
          categoryId: 2,
        },
        {
          id: 3,
          cover: require('../../images/image1.png'),
          describe: '今天（8月25日）上午10:00，北京市政府新闻办公室举行北京市义务教育阶段“双减”工作推进情况新闻发布会，市教委、市民政局、',
          title: '互利共赢，中阿挖掘一带一路合作新潜能',
          button: '查看详情',
          month: '08-25',
          year: 2021,
          categoryId: 3,
        },
        {
          id: 4,
          cover: require('../../images/image1.png'),
          describe: '今天（8月25日）上午10:00，北京市政府新闻办公室举行北京市义务教育阶段“双减”工作推进情况新闻发布会，市教委、市民政局、',
          title: '先富帮后富 三次分配传递向善力量',
          button: '查看详情',
          month: '08-25',
          year: 2021,
          categoryId: 1,
        },
        {
          id: 5,
          cover: require('../../images/image1.png'),
          describe: '今天（8月25日）上午10:00，北京市政府新闻办公室举行北京市义务教育阶段“双减”工作推进情况新闻发布会，市教委、市民政局、',
          title: '互利共赢，中阿挖掘一带一路合作新潜能',
          button: '查看详情',
          month: '08-25',
          year: 2021,
          categoryId: 2,
        },
        {
          id: 6,
          cover: require('../../images/image1.png'),
          describe: '今天（8月25日）上午10:00，北京市政府新闻办公室举行北京市义务教育阶段“双减”工作推进情况新闻发布会，市教委、市民政局、',
          title: '先富帮后富 三次分配传递向善力量',
          button: '查看详情',
          month: '08-25',
          year: 2021,
          categoryId: 3,
        },
      ],
    };
  },
  created() {},
  methods: {
    //不同分类显示不同新闻
    showGoodsByCategoryId(categoryId) {
      this.showCategoryId = categoryId;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.container {
  margin-bottom: 100px;
}
// 顶部
.top {
  // width: 1920px;
  height: 420px;
  background-image: url('../../images/news.png');
  background-position: 50% 50%;
}
.topImg {
  width: 100%;
  height: 100%;
}
// 中间目录
.navigation {
  display: flex;
  width: auto;
  height: 60px;
  margin: 0 auto;
  justify-content: center;
  border-bottom: 1px solid #eeeeee;
  // margin-bottom: 50px;
}
.nav {
  width: 183px;
  height: 58px;
  font-size: 24px;
  line-height: 55px;
  text-align: center;
}
.nav:hover {
  background-color: #f2f2f2;
  color: #2e71fe;
}
// 新闻内容
.content {
  width: 1200px;
  margin: 0 auto;
  // margin-top: 50px;
  // box-sizing: border-box;
  // overflow: hidden;
  // background-color: aquamarine;
}
.news {
  display: flex;
  margin-top: 52px;
}
.shownew {
  display: flex;
}
// 左图
.newsImg {
  width: 288px;
  height: 163px;
  margin-right: 40px;
  img {
    width: 100%;
    height: 100%;
  }
}
.newState {
  width: 733px;
  height: 163px;
  box-sizing: border-box;
}
// 新闻
.title {
  font-size: 25px;
  margin-bottom: 27px;
  font-weight: 700;
}
.describe {
  font-size: 17px;
  margin-bottom: 15px;
  width: 650px;
}
.button {
  width: 120px;
  height: 35px;
  border: 1px solid #cccccc;
  color: #000000;
  text-align: center;
  line-height: 32px;
}
.button:hover {
  border: 1px solid #2e71fe;
  color: #2e71fe;
}

// 右边日期
.data {
  height: 50px;
  width: 150px;
  margin-top: 60px;
  box-sizing: border-box;
  margin-left: 45px;
  padding-left: 50px;
  border-left: 1px solid #e5e5e5;
}
.month {
  font-size: 20px;
  font-weight: 500;
}
.year {
  font-size: 15px;
  font-weight: 500;
}
</style>
